<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ESEABIRD MANAGER</title>
		<link rel="stylesheet" href="dists/super/css/superBlack.css">
		<script src="dists/jquery-easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="dists/jquery-easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="dists/daterangepicker/moment.min.js" ></script>

		<link rel="stylesheet" href="dists/super/css/superBlack.css">
		<script src="dists/super/js/super.js"></script>
		
	    <style>
	        html,body {width: 100%;height: 100%; background-image: url("dists/imgs/login_bg1.png");background-size: cover; display: flex; justify-content: center;align-items:center;}
	        .login {width: 400px; height: 300px; background: #FFF; padding: 40px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);}
	        .login .title{display: block; width: 100%; text-align: center; box-sizing: border-box; padding: 20px;  font-size: 28px; font-weight: bold; color: #6C6C6C;}
	        .userLogin .form-item{display: flex; margin-bottom: 20px;}
	        .userLogin .form-item > label{font-size: 14px; height: 40px; line-height: 40px; color: #333;}
	        .userLogin .form-item > input{flex-grow: 1;height: 40px; line-height: 40px; padding: 0px 10px; border: none; border-bottom: 1px solid #C4C4C4; transition: all .3s ease; border-width: thin; outline: none;}
	        .userLogin .form-item > input:focus{border-color: #000000;}
	        .login-btn{width: 100%; background-color: #4176FF; height: 40px; line-height: 40px; text-align: center; border-radius: 5px; font-size: 14px; transition: all .3s ease; border: none; cursor: pointer; color: #FFF; margin: 40px 0px 20px 0px; }
	        .login-btn:hover{opacity: 0.8;}
	    </style>
	</head>

	<body>
        <div class="login">
            <span class="title">登陆</span>
            <form class="userLogin">
				<div class="form-item">
					<label for="">账 号：</label>
					<input type="text" name="username" placeholder="用户名...">
				</div>
				<div class="form-item">
					<label for="">密 码：</label>
					<input type="password" name="password" placeholder="密码...">
				</div>
			</form>
			<button class="login-btn" onclick="login.methods.login()">登 陆</button>
        </div>
	</body>
    <script type="text/javascript">
        var login = {
            methods: {
                login: function () {
                    var params = {username: $('.userLogin input[name="username"]').val() , password: $('.userLogin input[name="password"]').val()}
					if (params.username == '') {
						showMessage('登录账号不能为空')
						return false
                    }
                    if (params.password == '') {
						showMessage('登录密码不能为空')
						return false
                    }
                    
                    $.ajax({
			            type: 'POST',
			            url: commonConfig.mgUrlPrefix() + '/uaa/login',
			            data: JSON.stringify(params),
			            dataType: 'json',
			            contentType: 'application/json',
			            success: function (response) {
			                if (response.code == 1) {
	                            localStorage.setItem('token', response.datas.token);
	                            localStorage.setItem('userName', response.datas.userName);
	                            localStorage.setItem('authorities', JSON.stringify(response.datas.authorities));
								localStorage.setItem('roles', JSON.stringify(response.datas.roles));
	                            window.location.href = 'index.html';
							} else {
								showMessage(response.message)
							}
			            },
			            error: function (error) {
			                alert('请求错误,请稍后重试....');
			            }
			        });
                }
           }
        }
    </script>
</html>